<template>
  <BasicSearch ref="basicSearch" :formItemList="formItemList" @handleSearch="handleSearch"
    @handleReset="handleReset">
    <template #btnOptions>
      <el-button type="primary" plain :icon="Plus" v-has-permission="'system:role:add'" @click="add">新增</el-button>
      <el-button type="primary" plain :icon="Edit" v-has-permission="'system:role:edit'" @click="edit">修改</el-button>
      <el-button type="primary" plain :icon="View" v-has-permission="'system:role:detail'" @click="detail">查看</el-button>
      <el-button type="primary" plain :icon="Delete" v-has-permission="'system:role:del'" @click="del">删除</el-button>
    </template>
  </BasicSearch>
  <STable ref="sTable" :dataSource="dataSource.tableData" :columns="columns" :total="dataSource.total"
    :loading="dataSource.loading" :tableProps="dataSource.tableProps" @onPageChange="handlePageChange"
    @handleSelection="handleSelectRows">
    <template #type="{ row, index }">
      {{ roleTypeEnum[row.type] }}
    </template>
    <template #state="{ row, index }">
      {{ commonStateEnum[row.state] }}
    </template>
  </STable>

  <RoleAlert v-if="isAlert" :isAlert="isAlert"  :flag="alertFlag" :info="currInfo"
  @closeDialog="closeDialog"></RoleAlert>
</template>
<script lang="ts" setup>
import {Plus,Edit,View,Delete} from '@element-plus/icons-vue'
import { DataType, ColumnsType } from "@components/common/Table/tableTypes";
import { toTreeData, alertEditAndLook, removeData } from "@/utils";
import { UseFormItem, OptionsData } from "@components/common/BasicSearch/serchTypes";
import { roleTypeEnum, commonStateEnum } from "@/utils/staticData";

import RoleAlert from "./components/RoleAlert.vue";
import { roleDel, roleQuery } from "@/request/apis/system/role";

/************************表格相关**********************/
let columns = ref<Array<ColumnsType>>([
  { title: "多选", type: 'selection', width: 65 },
  { title: "序号", type: "index", width: 120 },
  { title: "角色名称", key: "rname" },
  { title: "角色标识", key: "code" },
  { title: "角色类型", slot: "type" },
  { title: "角色状态", slot: "state" },
]);

// 表格参数
let dataSource = reactive({
  tableData: [] as Array<DataType>,
  loading: false,
  total: 0,
  tableProps: {
    "row-key": "id",
  },
});
const selectionsRows = ref<Array<DataType>>([]);
// 获取选中的载体
function handleSelectRows(selection: Array<DataType>) {
  selectionsRows.value = selection;
}
// 切换分页
function handlePageChange() {
  getData();
}


// 获取数据
function getData() {
  dataSource.loading = true;
  let params = {
    currentPage: sTable.value.current,
    pageSize: sTable.value.pageSize,
    ...basicSearch.value.searchInfo
  };
  roleQuery(params)
    .then((res: Response) => {
      dataSource.tableData = res.data;
      dataSource.loading = false;
      dataSource.total = res.totalRecords;
    })
    .catch((err) => {
      dataSource.loading = false;
    });
}

// ---------------操作---------------
//#region
let isAlert = ref<boolean>(false);
const alertFlag = ref("");

let currInfo = reactive<object>({})

provide("handleCancel", closeDialog);
// 关闭弹框
function closeDialog(flag: number) {
  isAlert.value = false;
  if (flag == 1) {
    getData();
  }
}

// 删除
function delData() {
  let ids: any[] = []
  selectionsRows.value.map(item => {
    ids.push(item.id)
  })
  roleDel(ids).then(res => {
    getData();
    ElMessage.success('删除成功')
  }).catch(err => {

  })
}

//新增操作
function add(){
  alertFlag.value = 'role_add';
  isAlert.value = true;
}

//修改操作
function edit(){
  alertFlag.value = 'role_edit';
  if (alertEditAndLook(selectionsRows.value)) {
    currInfo = selectionsRows.value[0]
    isAlert.value = true;
  }
}

//查看操作
function detail(){
  alertFlag.value = 'role_look';
  if (alertEditAndLook(selectionsRows.value)) {
    currInfo = selectionsRows.value[0]
    isAlert.value = true;
  }
}
//删除按钮操作
function del(){  
  removeData(selectionsRows.value, delData)
}
//#endregion

/************************* 查询相关 **************************/
//#region
const sTable = ref();
const basicSearch = ref();

// 搜索条件
let formItemList = ref<Array<UseFormItem>>([
  { type: "input", label: "角色名称", prop: "rname", maxlength: 32 }
]);

// 查询
function handleSearch() {
  sTable.value.setCurrentPage(1);
  sTable.value.setPageSize(10);
  getData();
}

// 重置
function handleReset() {
  sTable.value.setCurrentPage(1);
  sTable.value.setPageSize(10);
  getData();
}
//#endregion

// 初始化
onMounted(() => {
  getData();
});
</script>

<style scoped lang="scss">
.table_opt {
  margin-bottom: 10px;
}
</style>